<template>
    <div @click.stop>
        <div class="edit-time">
            <a-time-picker
                placeholder="开始时间"
                v-model="startTime"
                format="HH:mm"
                :allowClear="false"
                :showNow="false"
                @change="changeStartTime"
            />
            <span>至</span>
            <a-time-picker
                placeholder="结束时间"
                v-model="endTime"
                format="HH:mm"
                value-format="HH:mm"
                :allowClear="false"
                :showNow="false"
                @change="changeEndTime"
            />
        </div>
        <!-- <el-time-picker
            v-model="value1"
            is-range
            format="HH:mm"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
        /> -->
        <div class="pop-footer">
            <a-button
                size="small"
                type="default"
                @click="handleVisibleClose"
                style="margin-right: 10px"
            >
                取消
            </a-button>
            <a-button size="small" type="primary" @click="confirm">
                确认
            </a-button>
        </div>
    </div>
</template>

<script setup>
import { ref, watch } from "vue";
import moment from "moment";
import { cloneDeep } from "lodash";
import { timeToCoordinate } from "./util"; // Assuming you have this utility function
const props = defineProps({
    activeIndex: {
        type: Number,
        required: true,
    },
    dayIndex: {
        type: Number,
        required: true,
    },
    timeline: {
        type: Object,
        required: true,
    },
    timelines: {
        type: Array,
        required: true,
    },
    handleVisibleClose: {
        type: Function,
        required: true,
    },
    getDay: {
        type: Function,
        required: true,
    },
});
const format = "HH:mm";

// Initializing state variables using Vue's ref
const startTime = ref(moment(props.timeline.startTime, format));
const endTime = ref(moment(props.timeline.endTime, format));

// Methods for changing start and end times
const changeStartTime = (time) => {
    startTime.value = time;
};

const changeEndTime = (time) => {
    endTime.value = time;
};

const confirm = () => {
    console.log(99999, startTime.value, endTime.value);
    if (startTime.value > endTime.value) {
        return $message.error("开始时间不能晚于结束时间");
    }

    if (
        props.activeIndex > 0 &&
        startTime.value <
            moment(props.timelines[props.activeIndex - 1].endTime, format)
    ) {
        return $message.error("开始时间不能超过上一时间条的结束时间");
    }

    if (
        props.activeIndex < props.timelines.length - 1 &&
        endTime.value >
            moment(props.timelines[props.activeIndex + 1].startTime, format)
    ) {
        return $message.error("结束时间不能大于下一时间条的开始时间");
    }

    let timeSliders = cloneDeep(props.timelines);
    const _startTime = moment(startTime.value).format(format);
    const _endTime = moment(endTime.value).format(format);

    const { offset, length, startHour, startMin, endHour, endMin } =
        timeToCoordinate(_startTime, _endTime);

    timeSliders[props.activeIndex] = {
        ...timeSliders[props.activeIndex],
        offset,
        length,
        startTime: _startTime,
        endTime: _endTime,
        startHour,
        startMin,
        endHour,
        endMin,
    };

    props.getDay(timeSliders, props.dayIndex);
    props.handleVisibleClose();
};
</script>

<style scoped>
/* Add any styles if necessary */
.edit-time span {
    margin: 0 5px;
}
</style>
